<!DOCTYPE html>
<html lang="ch-Hans">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网络哨兵</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/chart.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.2/echarts.min.js"></script>
    <script src="../js/axios.js"></script>
    <script src="/js/axiosInstance.js"></script>
    <script src="/js/common.js"></script>
</head>

<body>
    <div id="body-container">
        <div id="left-bar" class="card">
            <div class="menu">仪表盘</div>
            <div class="menu-item  selected" title="仪表盘">
                <svg t="1741346167132" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="5216" width="32" height="32">
                    <path
                        d="M512 972.8c254.498133 0 460.8-206.301867 460.8-460.8S766.498133 51.2 512 51.2 51.2 257.501867 51.2 512s206.301867 460.8 460.8 460.8z m0-68.266667C295.202133 904.533333 119.466667 728.797867 119.466667 512S295.202133 119.466667 512 119.466667s392.533333 175.735467 392.533333 392.533333-175.735467 392.533333-392.533333 392.533333z"
                        p-id="5217"></path>
                    <path
                        d="M402.602667 424.055467a34.133333 34.133333 0 0 1 21.418666-22.272l235.963734-82.193067c26.0096-9.045333 51.490133 14.830933 44.117333 41.3696l-65.058133 234.3936a34.133333 34.133333 0 0 1-21.674667 23.108267l-243.2 84.565333c-26.368 9.181867-52.002133-15.479467-43.861333-42.205867l72.2944-236.765866z m12.629333 192.426666l162.816-56.6272 42.837333-154.350933-158.037333 55.057067-47.616 155.921066z"
                        p-id="5218"></path>
                </svg>
                <span>仪表盘</span>
            </div>
            <hr>
            <div class="menu">状态</div>
            <div class="menu-item" title="数据监控">
                <svg t="1741346258706" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="7049" width="32" height="32">
                    <path
                        d="M652.8 981.333333c-20.352 0-37.546667-12.544-43.818667-32.896L371.2 236.970667 272.64 526.933333c-6.272 18.773333-25.045333 31.36-43.818667 31.36H89.6c-26.581333 0-46.933333-20.394667-46.933333-47.018666 0-26.666667 20.352-47.018667 46.933333-47.018667h106.368l131.413333-390.186667C333.653333 55.210667 352.426667 42.666667 371.2 42.666667c20.352 0 37.546667 12.544 43.818667 32.896L652.8 787.029333l98.56-289.92c6.272-18.773333 25.045333-31.36 43.818667-31.36H934.4c26.581333 0 46.933333 20.394667 46.933333 47.018667 0 26.666667-20.352 47.018667-46.933333 47.018667h-106.368l-132.992 390.186666c-4.693333 18.816-23.466667 31.36-42.24 31.36z"
                        p-id="7050"></path>
                </svg>
                <span>数据监控</span>
            </div>
            <div class="menu-item" title="异常分析">
                <svg t="1741346342227" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="8884" width="32" height="32">
                    <path
                        d="M816 624h-96V400h96c106.032 0 192-85.952 192-192S922.048 16 816 16 624 101.968 624 208v96H400v-96c0-106.048-85.968-192-192-192S16 101.968 16 208s85.968 192 192 192h96v224h-96C101.968 624 16 709.968 16 816c0 106.048 85.968 192 192 192s192-85.952 192-192v-96h224v96c0 106.048 85.952 192 192 192 106.032 0 192-85.952 192-192 0-106.032-85.968-192-192-192z m-96-416a96 96 0 1 1 96 96h-96v-96zM304 816a96 96 0 1 1-96-96h96v96z m0-512h-96a96 96 0 1 1 96-96v96z m320 320H400V400h224v224z m192 288a96 96 0 0 1-96-96v-96h112v1.616c45.36 7.648 80 46.848 80 94.384a96 96 0 0 1-96 96z"
                        p-id="8885"></path>
                </svg>
                <span>异常分析</span>
            </div>
            <div class="menu">信息</div>
            <div class="info" title="用户名">
                <svg t="1741833193841" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="1470" width="32" height="32">
                    <path
                        d="M492.642454 544.492238c138.576752 0 250.922119-112.345367 250.922119-250.924119 0-138.576752-112.344367-250.922119-250.922119-250.922119-138.578752 0-250.924119 112.345367-250.924119 250.923119 0 138.577752 112.345367 250.923119 250.924119 250.923119m329.666273 152.226433C763.454107 634.645126 743.657571 613.336625 635.847097 607.485762H349.42681c-107.810473 5.851863-127.607009 27.159363-186.461629 89.231909-62.510535 64.169496-112.295368 145.404592-88.694922 246.144231 26.184386 65.876456 96.935728 81.138098 163.83616 81.138098h509.062069c66.899432 0 137.699773-15.261642 163.885159-81.138098 23.599447-100.739639-26.185386-181.974735-88.74492-246.144231"
                        p-id="1471"></path>
                </svg>
                <span id="username">xxxxx</span>
            </div>
            <div class="info" title="邮箱">
                <svg t="1741833344691" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="2526" width="32" height="32">
                    <path
                        d="M512.012041 630.535466l415.548448-346.226152c-2.25174-0.409407-4.274694-1.348636-6.610724-1.348636L103.074318 282.960677c-2.287865 0-4.32286 0.927187-6.5746 1.348636L512.012041 630.535466zM958.133584 320.144497c0-3.901411-1.071684-7.513829-2.25174-11.06604L661.313264 554.602446l295.014111 295.074318c0.758608-2.974224 1.806209-5.840075 1.806209-9.055127L958.133584 320.144497zM68.15428 309.042333c-1.143932 3.576294-2.287865 7.140546-2.287865 11.102164l0 520.465099c0 3.251176 1.119849 6.104986 1.854374 9.07921l295.110442-295.098401L68.15428 309.042333zM632.582502 578.492568l-108.697648 90.539229c-3.407714 2.901976-7.622201 4.298777-11.872813 4.298777-4.214487 0-8.453057-1.396802-11.896896-4.298777l-108.601317-90.491063L94.079398 875.963123c2.926058 0.770649 5.828034 1.842333 8.99492 1.842333l817.887488 0c3.227093 0 6.129069-1.059643 9.115334-1.842333L632.582502 578.492568z"
                        p-id="2527"></path>
                </svg>
                <span id="email">xxxxxxxx@xx.xxx</span>
            </div>
            <div class="info" title="日期">
                <svg t="1741833452557" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="4374" width="32" height="32">
                    <path
                        d="M864 992H160c-35.328 0-64-28.672-64-64V224c0-35.36 28.672-64 64-64h64v32c0 53.024 42.976 96 96 96 52.992 0 96-42.976 96-96v-32h192v32c0 53.024 43.008 96 96 96s96-42.976 96-96v-32h64c35.328 0 64 28.64 64 64v704c0 35.328-28.672 64-64 64z m0-608H160v544h704V384zM320 544h-96v-96h96v96z m0 160h-96v-96h96v96z m0 160h-96v-96h96v96z m160-320h-96v-96h96v96z m0 160h-96v-96h96v96z m0 160h-96v-96h96v96z m160-320h-96v-96h96v96z m0 160h-96v-96h96v96z m0 160h-96v-96h96v96z m160-320h-96v-96h96v96z m0 160h-96v-96h96v96z m0 160h-96v-96h96v96z m-96.992-608C668.192 256 640 227.776 640 192.992v-65.984C640 92.192 668.192 64 703.008 64s63.008 28.192 63.008 63.008v65.984c0 34.784-28.192 63.008-63.008 63.008z m-384 0C284.192 256 256 227.776 256 192.992v-65.984C256 92.192 284.192 64 319.008 64s63.008 28.192 63.008 63.008v65.984c0 34.784-28.224 63.008-63.008 63.008z"
                        p-id="4375"></path>
                </svg>
                <span id="date">xxxx-xx-xx</span>
            </div>
            <div class="info" title="时间">
                <svg t="1741833509215" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="5382" width="32" height="32">
                    <path
                        d="M512 64C265 64 64 265 64 512s201 448 448 448 448-201 448-448S759 64 512 64z m185.8 612.9c-6.5 12-16.5 20.4-28.1 23.5-3.3 0.9-6.7 1.3-10.1 1.3-7.8 0-15.6-2.3-22.9-6.7l-149.4-96.1c-5.2-3.1-11.4-6.8-15.6-11.8-20.6-13-30.6-26.3-30.6-40.7V281.1c0-27.1 21-49.1 46.9-49.1 25.8 0 46.9 22 46.9 49.1v241.6l142.6 87.6c23.3 14.3 32.4 44.2 20.3 66.6z"
                        p-id="5383"></path>
                </svg>
                <span id="time">xx:xx:xx</span>
            </div>
            <button class="black-button" title="登出">登出</button>
            <button class="black-button" title="修改密码">修改密码</button>
            <button class="black-button" title="修改邮箱">修改邮箱</button>
            <button class="black-button" title="上传文件">上传文件</button>
        </div>
        <div id="container-window">
            <div>
                <div id="dashboard" class="container">
                    <div class="container-head card">
                        <div id="chart4" class="chart-container"></div>
                    </div>
                    <div class="container-body card">
                        <!-- 折线图容器 -->
                        <div id="chart1" class="chart-container"></div>
                    </div>
                </div>
                <div id="data-monitor" class="container">
                    <div class="container-head card">
                        <table>
                            <thead>
                                <tr>
                                    <th>当前异常事件数</th>
                                    <th>总数据流量</th>
                                    <th>总数据包速率</th>
                                    <th>检测状态</th>
                                    <th>更新时间</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>3</td>
                                    <td>10MB/s</td>
                                    <td>1000/s</td>
                                    <td>正常✅</td>
                                    <td>2020-12-12 12:12:12</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="container-body">
                        <div class="card monitor">
                            <div id="chart6" class="chart-container"></div>
                        </div>
                        <div class="row card chart-row">
                            <!-- 柱状图容器 -->
                            <div id="chart2" class="chart-container"></div>
                            <br>
                            <!-- 饼图容器 -->
                            <div id="chart3" class="chart-container"></div>
                        </div>

                    </div>
                    <div class="footer">
                        <button id="ban-ip-button" class="black-button" title="手动阻断IP">手动阻断IP</button>
                        <button id="white-list-button" class="black-button" title="管理白名单">管理白名单</button>
                    </div>
                </div>
                <div id="anomaly-analysis" class="container">
                    <div class="container-head card anomaly">
                        <div id="chart5" class="chart-container"></div>
                    </div>
                    <div class="container-body card">
                        <h3>异常列表</h3>
                        <table id="anomaly-table">
                            <thead>
                                <tr>
                                    <th class="col1">目标端口</th>
                                    <th class="col2">流持续时间</th>
                                    <th class="col3">流量速率</th>
                                    <th class="col4">数据包速率</th>
                                    <th class="col5">SYN次数</th>
                                    <th class="col6">RST次数</th>
                                    <th class="col7">ACK次数</th>
                                    <th class="col8">发生时间</th>
                                    <th class="col9">异常种类</th>
                                    <th class="col10">操作</th>
                                </tr>
                            </thead>
                            <tbody>

                                <tr>
                                    <td>80</td>
                                    <td>10s</td>
                                    <td>10MB/s</td>
                                    <td>1000/s</td>
                                    <td>10</td>
                                    <td>10</td>
                                    <td>10</td>
                                    <td>2020-12-12 12:12:12</td>
                                    <td>SYN Flood</td>
                                    <td><span class="a-text">详情</span></td>
                                </tr>
                                <tr>
                                    <td>80</td>
                                    <td>10s</td>
                                    <td>10MB/s</td>
                                    <td>1000/s</td>
                                    <td>10</td>
                                    <td>10</td>
                                    <td>10</td>
                                    <td>2020-12-12 12:12:12</td>
                                    <td>SYN Flood</td>
                                    <td><span class="a-text">详情</span></td>
                                </tr>
                                <tr>
                                    <td>80</td>
                                    <td>10s</td>
                                    <td>10MB/s</td>
                                    <td>1000/s</td>
                                    <td>10</td>
                                    <td>10</td>
                                    <td>10</td>
                                    <td>2020-12-12 12:12:12</td>
                                    <td>SYN Flood</td>
                                    <td><span class="a-text">详情</span></td>
                                </tr>
                                <tr>
                                    <td>80</td>
                                    <td>10s</td>
                                    <td>10MB/s</td>
                                    <td>1000/s</td>
                                    <td>10</td>
                                    <td>10</td>
                                    <td>10</td>
                                    <td>2020-12-12 12:12:12</td>
                                    <td>SYN Flood</td>
                                    <td><span class="a-text">详情</span></td>
                                </tr>
                                <tr>
                                    <td>80</td>
                                    <td>10s</td>
                                    <td>10MB/s</td>
                                    <td>1000/s</td>
                                    <td>10</td>
                                    <td>10</td>
                                    <td>10</td>
                                    <td>2020-12-12 12:12:12</td>
                                    <td>SYN Flood</td>
                                    <td><span class="a-text">详情</span></td>
                                </tr>
                                <tr>
                                    <td>80</td>
                                    <td>10s</td>
                                    <td>10MB/s</td>
                                    <td>1000/s</td>
                                    <td>10</td>
                                    <td>10</td>
                                    <td>10</td>
                                    <td>2020-12-12 12:12:12</td>
                                    <td>SYN Flood</td>
                                    <td><span class="a-text">详情</span></td>
                                </tr>
                                <tr>
                                    <td>80</td>
                                    <td>10s</td>
                                    <td>10MB/s</td>
                                    <td>1000/s</td>
                                    <td>10</td>
                                    <td>10</td>
                                    <td>10</td>
                                    <td>2020-12-12 12:12:12</td>
                                    <td>SYN Flood</td>
                                    <td><span class="a-text">详情</span></td>
                                </tr>
                                <tr>
                                    <td>80</td>
                                    <td>10s</td>
                                    <td>10MB/s</td>
                                    <td>1000/s</td>
                                    <td>10</td>
                                    <td>10</td>
                                    <td>10</td>
                                    <td>2020-12-12 12:12:12</td>
                                    <td>SYN Flood</td>
                                    <td><span class="a-text">详情</span></td>
                                </tr>
                                <tr>
                                    <td>80</td>
                                    <td>10s</td>
                                    <td>10MB/s</td>
                                    <td>1000/s</td>
                                    <td>10</td>
                                    <td>10</td>
                                    <td>10</td>
                                    <td>2020-12-12 12:12:12</td>
                                    <td>SYN Flood</td>
                                    <td><span class="a-text">详情</span></td>
                                </tr>
                                <tr>
                                    <td>80</td>
                                    <td>10s</td>
                                    <td>10MB/s</td>
                                    <td>1000/s</td>
                                    <td>10</td>
                                    <td>10</td>
                                    <td>10</td>
                                    <td>2020-12-12 12:12:12</td>
                                    <td>SYN Flood</td>
                                    <td><span class="a-text">详情</span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="footer">
                        <button class="icon-button page-button" title="上一页" id="prev-page" disabled>
                            <svg t="1741353054201" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="3964" width="32" height="32">
                                <path
                                    d="M512 754.496a44.992 44.992 0 0 1-32.832-14.08L283.52 544.832c-18.752-18.752-18.752-48.512 0-65.664L479.168 283.52c18.752-18.752 48.448-18.752 65.664 0 18.816 18.752 18.816 48.512 0 65.728L383.68 512l161.152 161.152c18.816 18.752 18.816 48.448 0 65.664A41.344 41.344 0 0 1 512 754.56z"
                                    p-id="3965"></path>
                                <path
                                    d="M705.984 558.912H316.416A46.08 46.08 0 0 1 269.504 512a46.08 46.08 0 0 1 46.912-46.912h389.568a46.08 46.08 0 0 1 46.912 46.912 46.08 46.08 0 0 1-46.912 46.912z"
                                    p-id="3966"></path>
                                <path
                                    d="M512 981.312C253.888 981.312 42.688 770.112 42.688 512S253.888 42.688 512 42.688s469.312 211.2 469.312 469.312-211.2 469.312-469.312 469.312z m0-844.8c-206.528 0-375.488 168.96-375.488 375.488S305.472 887.488 512 887.488s375.488-168.96 375.488-375.488S718.528 136.512 512 136.512z"
                                    p-id="3967"></path>
                            </svg>
                        </button>
                        <span id="current-page" contenteditable="true">1 </span>/
                        <span id="max-page">10</span>
                        <button class="icon-button page-button" title="下一页" id="next-page">
                            <svg t="1741353121018" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="4118" width="32" height="32">
                                <path
                                    d="M512 754.496a44.992 44.992 0 0 1-32.832-14.08c-18.816-18.816-18.816-48.512 0-65.728L640.256 512 479.168 350.848c-18.816-18.752-18.816-48.512 0-65.728 18.752-18.752 48.448-18.752 65.664 0l195.584 195.584c18.752 18.752 18.752 48.512 0 65.728l-195.584 193.92a44.992 44.992 0 0 1-32.832 14.08z"
                                    p-id="4119"></path>
                                <path
                                    d="M707.584 558.912H318.016A46.08 46.08 0 0 1 271.04 512a46.08 46.08 0 0 1 46.976-46.912h389.568a46.08 46.08 0 0 1 46.912 46.912 47.04 47.04 0 0 1-46.912 46.912z"
                                    p-id="4120"></path>
                                <path
                                    d="M512 981.312C253.888 981.312 42.688 770.112 42.688 512S253.888 42.688 512 42.688s469.312 211.2 469.312 469.312-211.2 469.312-469.312 469.312z m0-844.8c-206.528 0-375.488 168.96-375.488 375.488S305.472 887.488 512 887.488s375.488-168.96 375.488-375.488S718.528 136.512 512 136.512z"
                                    p-id="4121"></path>
                            </svg>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <dialog id="dialog" class="card">
        <div id="dialog-head">
            <h3 id="dialog-title">异常详情</h3>
            <svg t="1741419143235" class="icon icon-button close-dialog" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="7611" width="32" height="32">
                <path
                    d="M512 981.333333C253.013333 981.333333 42.666667 770.986667 42.666667 512S253.013333 42.666667 512 42.666667s469.333333 210.346667 469.333333 469.333333-210.346667 469.333333-469.333333 469.333333z m0-844.501333A375.125333 375.125333 0 0 0 136.832 512 375.125333 375.125333 0 0 0 512 887.168 375.125333 375.125333 0 0 0 887.168 512 375.125333 375.125333 0 0 0 512 136.832z"
                    p-id="7612"></path>
                <path
                    d="M631.296 678.4a45.226667 45.226667 0 0 1-32.981333-14.122667L359.722667 425.685333c-18.816-18.858667-18.816-48.64 0-65.962666 18.858667-18.816 48.64-18.816 65.962666 0l238.592 238.592c18.816 18.858667 18.816 48.64 0 65.962666a45.226667 45.226667 0 0 1-32.981333 14.08z"
                    p-id="7613"></path>
                <path
                    d="M392.704 678.4c-12.544 0-23.552-4.693333-32.981333-14.122667-18.816-18.858667-18.816-48.64 0-65.962666l238.592-238.592c18.858667-18.816 48.64-18.816 65.962666 0 18.816 18.858667 18.816 48.64 0 65.962666l-238.592 238.592c-7.850667 9.386667-20.437333 14.08-32.981333 14.08z"
                    p-id="7614"></path>
            </svg>
        </div>
        <div id="dialog-body">
            <div id="ban-ip">
                <div class="dialog-content">
                    <table>
                        <thead>
                            <tr>
                                <th>已阻断IP</th>
                                <th>阻断时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>10.46.153.66</td>
                                <td>2020-12-12 12:12:12</td>
                                <td><span class="a-text">撤销</span></td>
                            </tr>
                            <tr>
                                <td>10.46.153.66</td>
                                <td>2020-12-12 12:12:12</td>
                                <td><span class="a-text">撤销</span></td>
                            </tr>
                            <tr>
                                <td>10.46.153.66</td>
                                <td>2020-12-12 12:12:12</td>
                                <td><span class="a-text">撤销</span></td>
                            </tr>
                            <tr>
                                <td>10.46.153.66</td>
                                <td>2020-12-12 12:12:12</td>
                                <td><span class="a-text">撤销</span></td>
                            </tr>
                            <tr>
                                <td>10.46.153.66</td>
                                <td>2020-12-12 12:12:12</td>
                                <td><span class="a-text">撤销</span></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="footer">
                    <input type="text" name="ban-IP" placeholder="IP地址">
                    <button class="black-button" title="阻断IP">阻断IP</button>
                    <button class="black-button close-dialog" title="关闭">关闭</button>
                </div>
            </div>
            <div id="white-list">
                <div class="dialog-content">
                    <table>
                        <thead>
                            <tr>
                                <th>白名单IP</th>
                                <th>添加时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>10.46.153.66</td>
                                <td>2020-12-12 12:12:12</td>
                                <td><span class="a-text">撤销</span></td>
                            </tr>
                            <tr>
                                <td>10.46.153.66</td>
                                <td>2020-12-12 12:12:12</td>
                                <td><span class="a-text">撤销</span></td>
                            </tr>
                            <tr>
                                <td>10.46.153.66</td>
                                <td>2020-12-12 12:12:12</td>
                                <td><span class="a-text">撤销</span></td>
                            </tr>
                            <tr>
                                <td>10.46.153.66</td>
                                <td>2020-12-12 12:12:12</td>
                                <td><span class="a-text">撤销</span></td>
                            </tr>
                            <tr>
                                <td>10.46.153.66</td>
                                <td>2020-12-12 12:12:12</td>
                                <td><span class="a-text">撤销</span></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="footer">
                    <input type="text" name="white-IP" placeholder="IP地址">
                    <button class="black-button" title="添加白名单">添加白名单</button>
                    <button class="black-button close-dialog" title="关闭">关闭</button>
                </div>
            </div>
            <div id="anomaly-details">
                <div class="dialog-content">
                    <pre id="anomaly-details-content">
请求中...(<span>0</span>)
                    </pre>
                </div>
                <div class="footer">
                    <button id="downfile" class="black-button" title="导出">导出</button>
                    <button class="black-button close-dialog" title="返回">返回</button>
                </div>
            </div>
            <div id="change-password">
                <div class="dialog-content">
                    <form id="change-password-form">
                        <label for="old-password">旧密码</label>
                        <input type="password" id="old-password" name="old-password" placeholder="请输入旧密码">
                        <label for="new-password">新密码</label>
                        <input type="password" id="new-password" name="new-password" placeholder="请输入新密码">
                        <label for="confirm-password">确认密码</label>
                        <input type="password" id="confirm-password" name="confirm-password" placeholder="请再次输入新密码">
                    </form>
                </div>
                <div class="footer">
                    <button class="black-button" title="修改密码">修改密码</button>
                    <button class="black-button close-dialog" title="关闭">关闭</button>
                </div>
            </div>
            <div id="change-email">
                <div class="dialog-content">
                    <form id="change-email-form">
                        <label for="username-input">用户名</label>
                        <input type="password" id="username-input" name="username" placeholder="用户名" disabled>
                        <label for="email-input">邮箱</label>
                        <input type="email" id="email-input" name="email" placeholder="邮箱">
                    </form>
                </div>
                <div class="footer">
                    <button class="black-button" title="修改邮箱">修改邮箱</button>
                    <button class="black-button close-dialog" title="关闭">关闭</button>
                </div>
            </div>
        </div>
    </dialog>
    <script src="../js/index.js"></script>
    <script src="../js/chart.js"></script>
</body>

</html>